<template>
  <div class="main">
    <!-- 视图入口 -->
    <div id="mainLayout" class="main-layout">
      <router-view/>
    </div>
    <!-- app 底部 -->
    <BottomNav>
      <BottomNavItem to="/home" title="首页" icon="restore"></BottomNavItem>
      <BottomNavItem to="/order" title="订单" icon="favorite"></BottomNavItem>
      <BottomNavItem to="/contact" title="联系人" icon="location_on"></BottomNavItem>
      <BottomNavItem to="/help" title="帮助" icon="location_on"></BottomNavItem>
    </BottomNav>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Drawer from "@/components/Drawer";
import Button from "@/components/Button";
import Icon from "@/components/Icon";
import { BottomNav, BottomNavItem } from "@/components/BottomNav";
import UserDrawer from "@/views/common/user-drawer.vue";

@Component({
  components: {
    Drawer,
    BottomNav,
    BottomNavItem,
    Button,
    Icon,
    UserDrawer
  }
})
export default class Home extends Vue {
  userDrawerOpen = false;
}
</script>

<style lang="less">
  .main{
    .app-bar{
      width: 100%;
      top: 0;
      position: fixed;
      z-index: 999;
    }
    .main-layout{
      margin: 56px 0;
      overflow-y: auto;
      position: relative;
    }
    .mu-bottom-nav{
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 999;
    }
  }
</style>